<template>
    <div class="page_index index_banner" :style="{ backgroundImage: 'url(' + indexbg + ')' }">
        <div style="padding-top: 200px; ">
            <div style="font-size: 40px;color:#fff;font-weight: 800">
                开启心理测评新时代
            </div>
            <div style="font-size: 20px;color:#f4f5f6;margin-top:50px;font-weight: 600">
                含光AI大模型覆盖测评工作全流程，大幅提升测评效能
            </div>
            <div style="margin-top:50px">
                <el-button type="primary" size="large" round
                    @click="() => { this.$router.push('/userCenter') }">进入工作台</el-button>
                <el-button type="success" size="large" plain round
                    @click="() => { this.$router.push('/qnCenter') }">体验心理测评</el-button>
            </div>
        </div>
    </div>
    <div style="background-color: #fff;padding:100px 20px">
        <div style="text-align: center">
            <h1>只需4步，轻松得到你的答案</h1>
            <div style="padding:50px 20px">
                <label>全链路可视化构建问卷、分发问卷与分析问卷，自构建群组测评范围，精准触达目标群人。</label>
            </div>
        </div>
        <el-row :gutter="8">
            <el-col :span="6" :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
                <el-card shadow="hover" style="margin:2px">
                    <div><img src="../assets/createqn.png" style="width: 60px;" /></div>
                    <div>
                        <h3>创建问卷</h3>
                    </div>
                    <div>可视化拖拽快速构建心理测评量表</div>
                </el-card>
            </el-col>
            <el-col :span="6" :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
                <el-card shadow="hover" style="margin:2px">
                    <div><img src="../assets/publishqn.png" style="width: 60px;" /></div>
                    <div>
                        <h3>投放问卷</h3>
                    </div>
                    <div>一键定向投放，快速覆盖人群画像</div>
                </el-card>
            </el-col>
            <el-col :span="6" :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
                <el-card shadow="hover" style="margin:2px">
                    <div><img src="../assets/doqn.png" style="width: 60px;" /></div>
                    <div>
                        <h3>在线测评</h3>
                    </div>
                    <div>全平台多端支持在线测评，简易操作</div>
                </el-card>
            </el-col>
            <el-col :span="6" :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
                <el-card shadow="hover" style="margin:2px">
                    <div><img src="../assets/anaqn.png" style="width: 60px;" /></div>
                    <div>
                        <h3>智能分析</h3>
                    </div>
                    <div>含光AI大模型测评分析，多维度报告</div>
                </el-card>
            </el-col>
        </el-row>
    </div>

    <div style="background-color: #f4f5f6;padding:100px 20px">
        <div style="text-align: center">
            <h1>多场景覆盖，带你走进心理的世界</h1>
            <div style="padding:50px 20px">
                <label>为基础教育、职业教育及高等教育机构，提供简单可依赖的心理健康教育服务，帮助教育机构持续减负增效。</label>
            </div>
            <div>
                <el-segmented v-model="activeRole" :options="['教育局', '学校', '心理老师', '班主任', '学生', '家长']" size="large" />
            </div>
            <div style="text-align: left;padding:40px;align-items: center;" v-if="activeRole == '教育局'">
                <el-row :gutter="12">
                    <el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <div>
                            <h1 class="dotTitle">统筹区域内心理健康工作</h1>
                            <label>多层级监测和管理区域内心理工作，建设全面的心理健康档案信息，并由此开展心理筛查、心理预警、危机干预等工作。</label>
                        </div>
                        <div>
                            <h1 class="dotTitle">多角色、多视角的心理工作分层</h1>
                            <label>平台可多级架设如区管理员、校管理员、普通教师、心理教师、学生、家长等适用的用户模式，教育局能监测不同的主体下心理工作的具体开展与推进。</label>
                        </div>
                        <div>
                            <h1 class="dotTitle">心理资源动态管理</h1>
                            <label>教育局可以通过资源管理，基于壹心理平台的专家资源提供心理咨询、心理测评、心理倾诉服务，以及优质专业的品牌课程，更好助力区域内心理健康工作的开展。</label>
                        </div>
                    </el-col>
                    <el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <img src="../assets/eduBG.png" style="width: 100%;" />
                    </el-col>
                </el-row>
            </div>

            <div style="text-align: left;padding:40px;align-items: center;" v-if="activeRole == '学校'">
                <el-row :gutter="12">
                    <el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <div>
                            <h1 class="dotTitle">防范心育工作风险</h1>
                            <label>通过平台以评估、预警、干预、预防为核心的智能检测体系，针对潜在的心理危机实现早预防、早报告、早处理。</label>
                        </div>
                        <div>
                            <h1 class="dotTitle">提升心育工作成效</h1>
                            <label>基于全面精准的学校心理健康教育发展分析数据，有效辅助学校心育决策，确保心理健康教育工作收到预期成效。</label>
                        </div>
                        <div>
                            <h1 class="dotTitle">构建完善心育体系</h1>
                            <label>“平台即体系”，通过平台完善的评估、预警、干预、预防体系，高效开展心育工作，高效建构完善的心育体系。</label>
                        </div>
                    </el-col>
                    <el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <img src="../assets/schoolBG.png" style="width: 100%;" />
                    </el-col>
                </el-row>
            </div>

            <div style="text-align: left;padding:40px;align-items: center;" v-if="activeRole == '心理老师'">
                <el-row :gutter="12">
                    <el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <div>
                            <h1 class="dotTitle">心理工作线上与线下相融合</h1>
                            <label>通过平台将传统的线下校园心理工作与线上功能相结合，基于平台功能拓展串供心理工作的边界，更高效、科学、全面地推进学校心理工作的进展。</label>
                        </div>
                        <div>
                            <h1 class="dotTitle">心理危机的报备及应对机制</h1>
                            <label>通过心理筛查/咨询报备危机，划分不同的危机等级，及时反馈，追踪危机信息并并进行有效处理，通过平台数据对危机状况进行有效分析，保障其心理健康。</label>
                        </div>
                        <div>
                            <h1 class="dotTitle">专业成长的发展路径</h1>
                            <label>平台为心理老师提供专业的心理培训，帮助心理老师打牢基本功，厘清学生心理工作的发展路径，全面提升老师的专业实务能力。</label>
                        </div>
                    </el-col>
                    <el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <img src="../assets/xinliBG.png" style="width: 100%;" />
                    </el-col>
                </el-row>
            </div>

            <div style="text-align: left;padding:40px;align-items: center;" v-if="activeRole == '班主任'">
                <el-row :gutter="12">
                    <el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <div>
                            <h1 class="dotTitle">结合心理数据开展预防工作</h1>
                            <label>通过心理筛查的大数据及时了解学生的心理健康状况，以便于班主任结合班级的实际情况开展讲座、团体活动等心理预防工作。</label>
                        </div>
                        <div>
                            <h1 class="dotTitle">协助学生了解问题及解决方案</h1>
                            <label>通过心理老师报备的信息和平台提醒，可以及时获知学生当前的心理状况，根据紧急程度和问题的复杂程度及时处理，避免问题严重化。</label>
                        </div>
                        <div>
                            <h1 class="dotTitle">心理健康学习和成长的平台</h1>
                            <label>平台提供的大量心理科普课程和文章等学习资源，帮助班主任学习基础的心理学知识，助力学生日常管理和班级心理预防工作的开展。</label>
                        </div>
                    </el-col>
                    <el-col :span="12" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <img src="../assets/teacherBG.png" style="width: 100%;" />
                    </el-col>
                </el-row>
            </div>

            <div style="text-align: left;padding:40px;align-items: center;" v-if="activeRole == '学生'">
                <el-row :gutter="12">
                    <el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <div>
                            <h1 class="dotTitle">“一生一档”持续追踪</h1>
                            <label>通过建立学生心理档案，动态监测学生的心理健康状态，推进心理预防工作的开展，预防心理危机的的产生。</label>
                        </div>
                        <div>
                            <h1 class="dotTitle">及时响应心理服务诉求</h1>
                            <label>学生可以通过平台预约线下心理咨询服务和线上的心理倾诉，在有需要的时候获得心理支持，预防心理危机的产生。</label>
                        </div>
                        <div>
                            <h1 class="dotTitle">心理健康成长和学习园地</h1>
                            <label>平台为学生提供一个心理成长的平台，学生可以通过自助的方式练习放松、疏导情绪、学习心理科普内容，发展出自己应对心理风险能力。</label>
                        </div>
                    </el-col>
                    <el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <img src="../assets/studentBG.png" style="width: 100%;" />
                    </el-col>
                </el-row>
            </div>

            <div style="text-align: left;padding:40px;align-items: center;" v-if="activeRole == '家长'">
                <el-row :gutter="12">
                    <el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <div>
                            <h1 class="dotTitle">掌握孩子的心理状态</h1>
                            <label>通过平台心理数据的反馈，家长能够掌握孩子阶段性的心理状态，对孩子心理问题及时知悉与提前预防</label>
                        </div>
                        <div>
                            <h1 class="dotTitle">配合老师完成孩子心育工作</h1>
                            <label>针对危机报备和处于心理困扰中的孩子，结合心理老师的建议共同应对，呵护孩子的心理健康。</label>
                        </div>
                        <div>
                            <h1 class="dotTitle">家长成长和学习的园地</h1>
                            <label>平台为家长提供心理学习资源，家长可以通过相关科普内容的学习参与孩子的亲职教育实践，提升亲子关系的品质，为孩子营造良好的成长空间。</label>
                        </div>
                    </el-col>
                    <el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <img src="../assets/parentBG.png" style="width: 100%;" />
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>


    <div style="background-image: linear-gradient(to bottom, #fff 4%, #e2ebf0 100%);padding:100px 20px">
        <div style="text-align: center">
            <h1>方案落地新疆、锦州等地，多次获得国家级金奖</h1>
            <div style="padding:50px 20px">
                <label>含光AI是一家Al心理测评与情感交互创新解决方案提供商，是一个由AI驱动的心理测评与情感交互平台。拥有全栈自研的多模态AI心理交互大模型、智能情感交互芯片、在线心理陪伴社区、450套仿真虚拟人、心理测评陪伴一体机以及移动端App，致力于为心理健康提供的次世代智慧筛查、检测、干预能力。</label>
            </div>
        </div>
        <el-carousel :interval="4000" type="card"  :height="screenheight" >
            <el-carousel-item>
                <img src="../assets/banner1.png" style="height: 100%;width:100%;object-fit: cover;" />
            </el-carousel-item>
            <el-carousel-item>
                <img src="../assets/banner2.png" style="height: 100%;width:100%;object-fit: cover;" />
            </el-carousel-item>
            <el-carousel-item>
                <img src="../assets/banner3.png" style="height: 100%;width:100%;object-fit: cover;" />
            </el-carousel-item>
            <el-carousel-item>
                <img src="../assets/banner4.png" style="height: 100%;width:100%;object-fit: cover;" />
            </el-carousel-item>
            <el-carousel-item>
                <img src="../assets/banner5.png" style="height: 100%;width:100%;object-fit: cover;" />
            </el-carousel-item>
            <el-carousel-item>
                <img src="../assets/banner6.png" style="height: 100%;width:100%;object-fit: cover;" />
            </el-carousel-item>
            <el-carousel-item>
                <img src="../assets/banner7.png" style="height: 100%;width:100%;object-fit: cover;" />
            </el-carousel-item>
            <el-carousel-item>
                <img src="../assets/banner8.png" style="height: 100%;width:100%;object-fit: cover;" />
            </el-carousel-item>
        </el-carousel>
    </div>
    <div class="create_wj index_banner" :style="{ backgroundImage: 'url(' + footerbg + ')' }">
        <div style="padding: 100px 0px; ">
            <div style="font-size:40px;color:#fff">
                让含光AI心理测评重塑工作流
            </div>
        </div>
    </div>

</template>
<script>
import indexbg from '../assets/bg.jpg'
import footerbg from '../assets/footerbg.png'
export default {
    data() {
        return {
            screenheight: document.documentElement.clientHeight/3 + 'px',
            indexbg: indexbg,
            footerbg: footerbg,
            activeRole: '教育局',
            imgBaseURL:import.meta.env.VITE_DOWNFILE_API_BASE_URL
        }
    },
    mounted() {
        window.onresize = () => {
            return (() => {
                this.screenheight = document.documentElement.clientHeight/3 + 'px'
            })
        }
    }
}
</script>
<style>
.page_index {
    background-color: transparent;
    background-position: center;
    background-size: cover;
    position: relative;
    width: 100%;
    text-align: center;
    min-height: 100%;
}
.el-carousel{
    width: 100%
}
.index_banner {
    background: rgba(0, 82, 217, 0.01);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    text-align: center;
}

.create_wj {
    background-image: url(footerbg);
    background-size: cover;
    background-position: center;
    width: 100%;
    padding: 100px auto;
}
</style>